<template>
  <BaseDialog :title="title" :width="dialogWidth" :visible="dialogVisible" @close="closeDialog"
    @confirm="confirmDialog">
    <template #content>
      <el-form label-position="top" label-suffix="：">
        <el-form-item label="离职原因" prop="leaveReason">
          <BInput v-model="formData.leaveReason" :rows="8" type="textarea" placeholder="请输入离职原因" />
        </el-form-item>
        <div>备注：离职后该账号无法登录系统，请谨慎操作</div>
      </el-form>
    </template>
  </BaseDialog>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from 'vue';
import BaseDialog from '@/components/Dialog/BaseDialog.vue';
import { BInput } from '@/components/BaseComponents';
import { leaveUser } from '@/api/modules/user';
import { ElMessage } from 'element-plus';


const dialogWidth = ref('600px')

const props = defineProps<{
  title: string;
  rowId?: number;
  dialogVisible: boolean;
}>();

const emits = defineEmits<{
  (event: 'close'): void;
  (event: 'confirm'): void;
}>();

const formData = ref({
  id: props.rowId,
  leaveReason: '',
})

watch(() => props.rowId, (newRowId) => {
  formData.value.id = newRowId;
});

const closeDialog = () => {
  emits('close');
};

const confirmDialog = async () => {
  await leaveUser(formData.value).then(() => {
    emits('confirm');
    ElMessage.success('离职操作成功');

  }).catch((error) => {
    ElMessage.error('离职操作失败');
  })

};
</script>

<style scoped lang="scss">
.leave-dialog-content {
  padding: 20px;
}

.dialog-footer {
  text-align: center;
}
</style>
